<template>
  <div id="save">
    <header class="px-3 py-2 border-bottom">
      <nav class="d-flex">
        <Button type="primary" icon="ios-search" class="mr-2">上传</Button>
        <Button icon="ios-search" class="mr-2">新建文件夹</Button>
        <Button icon="ios-search" class="mr-2" v-if="checkedTrueLength"
          >下载</Button
        >
        <Button icon="ios-search" class="mr-2" v-if="checkedTrueLength == 1"
          >分享</Button
        >
        <Button
          icon="ios-search"
          class="mr-2"
          v-if="checkedTrueLength == 1"
          @click="rename(false)"
          >重命名</Button
        >
        <Button
          icon="ios-search"
          class="mr-2"
          v-if="checkedTrueLength"
          @click="delMoney"
          >删除</Button
        >
        <Input search enter-button placeholder="请输入关键词" class="ml-auto" />
      </nav>
      <Checkbox :value="checkedStatus" class="mt-3" @on-change="changeAll"
        ><span class="ml-2">全选</span></Checkbox
      >
    </header>
    <article>
      <list
        :item="item"
        :index="index"
        v-for="(item, index) in list"
        :key="index"
        @changeSingle="changeSingle"
      />
    </article>
    <Page :total="100" show-sizer class="px-3 py-3" />
    <div class="images d-none" v-viewer="{ movable: false }">
      <img v-for="(src, index) in images" :src="src.url" :key="index" />
    </div>
  </div>
</template>

<script>
import List from "@/components/list";

export default {
  components: {
    list: List,
  },
  data() {
    return {
      list: [
        {
          type: "dir",
          name: "我的笔记",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "dir",
          name: "我的备份",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "dir",
          name: "相册管理",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "dir",
          name: "我的资源",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "image",
          name: "风景.jpg",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg",
        },
        {
          type: "image",
          name: "海报.jpg",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg",
        },
        {
          type: "video",
          name: "uniapp实战社区交友教程.mp4",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
        },
        {
          type: "video",
          name: "uniapp实战商城教程.mp4",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
        },
        {
          type: "video",
          name: "uniapp实战仿微信教程.mp4",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
        },
        {
          type: "image",
          name: "摄影.jpg",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg",
        },
        {
          type: "text",
          name: "记事本.txt",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "none",
          name: "压缩包.rar",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
      ],
      value: "",
    };
  },
  methods: {
    // 全选
    changeAll(e) {
      this.list.map((item) => (item.checked = e));
    },
    // 反选
    changeSingle(data) {
      switch (data.type) {
        case "checked":
          this.list[data.index].checked = data.value;
          break;
        case "delete":
          this.list.splice(data.index, 1);
        case "rename":
          this.rename(data.index);
        case "image":
          const viewer = this.$el.querySelector(".images").$viewer;
          const index = this.images.findIndex((item) => item.url == data.url);
          //通过传递的图片所在数组的下标,显示对应下标的图片
          viewer.view(index);
          viewer.show();

        default:
          break;
      }
    },
    // 重命名
    rename(index = false) {
      let item = index === false ? this.checkedTrue[0] : this.list[index];
      let value = item.name;
      this.$Modal.confirm({
        render: (h) => {
          return h("Input", {
            props: {
              value: value,
              autofocus: true,
              placeholder: "请填写新的名称...",
            },
            on: {
              input: (val) => {
                this.value = val;
              },
            },
          });
        },
        onOk: () => {
          item.name = this.value;
        },
      });
    },
    // 删除多个
    delMoney() {
      const newList = this.list.filter((item) => item.checked == false);
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除当前选中",
        onOk: () => {
          this.list = newList;
          this.$Message.success("已删除");
        },
      });
    },
  },
  computed: {
    // checked为 true 的数组
    checkedTrue() {
      return this.list.filter((item) => item.checked == true);
    },
    // checked为 true 的长度
    checkedTrueLength() {
      return this.list.filter((item) => item.checked == true).length;
    },
    // 全选框的状态
    checkedStatus() {
      return this.checkedTrueLength == this.list.length;
    },
    // 图片缩放
    images() {
      const urls = [];
      this.list.forEach((item) => {
        if (item.type == "image") {          
          urls.push(item);      
        }  
      });       
      return urls;   
    },
    // 图片缩放
    images() {
      const urls = [];
      this.list.forEach((item) => {
        if (item.type == "image") {
          urls.push(item);
        }
      });
      return urls;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
#save {
  position: relative;
  width: 100%;
  height: 100%;
}
.ivu-input-wrapper {
  width: 220px;
}
article {
  position: absolute;
  top: 94px;
  bottom: 60px;
  width: 100%;
  overflow: auto;
  // background: url("https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg")
  //   no-repeat;
  // background-size: cover;
}
.ivu-page {
  position: absolute;
  bottom: 0;
  left: 0;
}
img {
  width: 100%;
  height: 100%;
}
</style>
